<script setup lang="ts">
import {onMounted} from 'vue'
import {addArticleUrl, getArticleUrl, getCateGoryAndTagsUrl} from "@/api/blog/article.ts";
import ArticleItem from './ArticleItem.vue'
import AddArticleDialog from "@/views/blog/article/content/AddArticleDialog.vue";

const {proxy}: any = getCurrentInstance()
const queryParam = ref({
  pageNum: 1,
  pageSize: 10,
  artTitle: '',
  artCategoryId: '',
  tags: '',
  publishTime: ''
})
const AddArticleDialogRef = ref(null)
const total = ref(0)
const articleList = ref([])
const handleGetArticleList = () => {
  getArticleUrl(queryParam.value).then((res: any) => {
    articleList.value = res.rows
    total.value = res.total
  })
}
const handleAddArticle = () => {
  proxy.$modal.confirm('确定新增一片文章吗？').then((res: any) => {
    // 新建一个表单提交数据
    addArticleUrl().then((res) => {
      proxy.$modal.msgSuccess('新增文章成功')
      handleGetArticleList()
    })
  })
}

const formData = reactive({
  artTitle: '',
  categoryId: '',
  tags: '',
  publishTime: '',
})



const cateGoryOptions = ref([])
const tagsOptions = ref([])

onMounted(() => {
  handleGetArticleList()
  getCateGoryAndTagsUrl().then((req) =>{
    cateGoryOptions.value = req.data.cateGory
    tagsOptions.value = req.data.tags
  })
})
</script>
<template>
  <div>
    <div class="grid-box-header">
      <el-form inline :model="formData">
        <el-form-item>
          <el-input v-model="queryParam.artTitle" placeholder="请输入文章标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryParam.artCategoryId" @change="handleGetArticleList" style="width: 160px" placeholder="请选择文章分类">
            <el-option label="全部专栏" value=""></el-option>
            <el-option v-for="item in cateGoryOptions" :key="item.bcId" :label="item.bcName" :value="item.bcId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 发布时间    -->
          <el-date-picker
              v-model="queryParam.publishTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="plus" plain type="success" @click="handleAddArticle">新增文章</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template v-for="(item, index) in articleList" :key="index">
      <ArticleItem :article="item" @getList="handleGetArticleList" @openDialog="AddArticleDialogRef.openDialog"></ArticleItem>
    </template>
    <AddArticleDialog  ref="AddArticleDialogRef" @getList="handleGetArticleList"/>
    <!-- 分页器    -->
    <el-pagination
        background
        v-if="total > 0"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:page-size="queryParam.pageSize"
        v-model:current-page="queryParam.pageNum"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="handleGetArticleList"
        style="margin-top: 30px; padding-bottom: 20px; float: right; text-align: center"
    />
  </div>
</template>

<style scoped lang="scss">

</style>
